<template>
    <div style="padding: 30px;width: 100%;">
        <a-row>
            <a-col :span="1" style="line-height: 30px;">
                <h3>表名：</h3>
            </a-col>
            <a-col :span="4">
                <a-input placeholder="请输入" v-model="tableName" />
            </a-col>
            <a-col :span="4">
                &emsp;<a-button type="primary" @click="addTable()">
                    保存
                </a-button>&emsp;&nbsp;
                <a-button @click="goLink('/yichan/Zidingyi')">返回</a-button>
            </a-col>
        </a-row>
        <a-row class=" zdy">
            <a-col :span="3">
                <h3>可用组件</h3>
                <draggable :list="list1" :sort="false" :group="{ name: 'aa', pull: 'clone', put: false }"
                    :clone="cloneDiv">
                    <a-col :span="23" class="type" v-for="element in list1" :key="element.id">{{element.name}}</a-col>
                </draggable>
            </a-col>
            <a-col :span="17">
                <h3>自定义表单</h3>
                <draggable class="list-group" :list="list2" group="aa" @change="log">
                    <div class="list-group-item" v-for="element,index in list2" :key="index" @click="clickDiv(index)">
                        <zujian :typeData="element.type" :nameData="element.name" />
                    </div>
                </draggable>
            </a-col>
            <a-col :span="3" style="margin-left: 10px;">
                <h3>内容修改</h3>
                <a-col :span="6" style="line-height: 30px;">名称：</a-col>
                <a-col :span="18"><a-input placeholder="请输入" v-model="newName" @change="changeName" /></a-col>
                <a-col :span="6" style="margin-top: 10px;">
                    <a-button type="primary" @click="deleteRow()">
                        删除组件
                    </a-button>
                </a-col>
            </a-col>
        </a-row>
    </div>

</template>

<script>
    import zujian from './table.vue'
    import draggable from "vuedraggable";
    let idGlobal = 8;
    export default {
        name: "custom-clone",
        display: "Custom Clone",
        order: 3,
        components: {
            draggable,
            zujian
        },
        data() {
            return {
                list1: [
                    { name: "输入框", id: 1, type: 'input' },
                    { name: "多行输入", id: 2, type: 'text' },
                    { name: "文件上传", id: 3, type: 'file' },
                    { name: "图片上传", id: 4, type: 'img' },
                    { name: "时间选择", id: 5, type: 'time' },
                    { name: "日期选择", id: 6, type: 'date' },
                ],
                list2: [
                ],
                tableName: '',
                newName: '',
                arrIndex: '',
                a: 0
            };
        },
        mounted() {
            if (this.$route.query.id) {
                this.$axios.get('/government-platform-center/userDefinedTable/' + this.$route.query.id).then(res => {
                    if (res.data.msg == 'success') {
                        this.tableName = res.data.data.tableName
                        var nameArr = res.data.data.dataRow.split(",")
                        var typeArr = res.data.data.dataRowType.split(",")
                        for (let i = 0; i < nameArr.length; i++) {
                            this.a++
                            this.list2.push(
                                {
                                    type: typeArr[i],
                                    name: nameArr[i],
                                    id: this.a
                                }
                            )
                        }
                    } else {
                        this.$router.push('/')
                    }
                },)
            } else {
                this.$router.push('/')
            }
        },
        methods: {
            goLink(e) {
                this.$router.push(e)
            },
            log: function (evt) {
                // window.console.log(evt);
            },
            addTable() {
                var dataRow = []
                var dataRowType = []
                for (let i = 0; i < this.list2.length; i++) {
                    dataRow.push(this.list2[i].name)
                    dataRowType.push(this.list2[i].type)
                }
                var parmas = {
                    dataRow: "" + dataRow + "",
                    dataRowType: "" + dataRowType + "",
                    tableName: this.tableName,
                    id: this.$route.query.id
                }
                this.$axios.post('/government-platform-center/userDefinedTable/edit', parmas, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }
                ).then(res => {
                    if (res.data.msg == 'success') {
                        this.$router.push('/yichan/Zidingyi')
                    }
                },)
            },
            changeName() {
                this.list2[this.arrIndex].name = this.newName
            },
            deleteRow() {
                this.list2.splice(this.arrIndex, 1)
                this.newName = ''
            },
            clickDiv(index) {
                this.newName = this.list2[index].name
                this.arrIndex = index
            },
            cloneDiv({ id }) {
                this.a++
                if (id == 1) {
                    return {
                        type: 'input',
                        name: '输入框：',
                        id: this.a
                    }
                }
                if (id == 2) {
                    return {
                        type: 'text',
                        name: '文本框：',
                        id: this.a
                    }
                }
                if (id == 3) {
                    return {
                        type: 'file',
                        name: '文件上传：',
                        id: this.a
                    }
                }
                if (id == 4) {
                    return {
                        type: 'img',
                        name: '图片上传：',
                        id: this.a
                    }
                }
                if (id == 5) {
                    return {
                        type: 'time',
                        name: '时间选择器：',
                        id: this.a
                    }
                }
                if (id == 6) {
                    return {
                        type: 'date',
                        name: '日期选择器：',
                        id: this.a
                    }
                }
            }
        }
    };
</script>
<style scoped>
    .zdy {
        width: 100%;
        box-sizing: border-box;
    }

    .type {
        border: 1px solid #00000080;
        height: 40px;
        padding-left: 10px;
        line-height: 40px;
        margin-bottom: 20px;
    }

    .list-group {
        width: 100%;
        height: 600px;
        border: 1px solid #00000080;
        box-sizing: border-box;
        padding: 20px;
        overflow-y: scroll;
    }
</style>